<template>
    <div class="login-container">
        <div class="login-content">
            <div class="login-header">
                <div class="logo">
                    <i class="fas fa-database"></i>
                    <span>通用后台管理平台</span>
                </div>
                <p class="welcome-text">欢迎登录系统</p>
            </div>

            <el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="login-form">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" size="large" :prefix-icon="User" />
                </el-form-item>

                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" size="large"
                        :prefix-icon="Lock" show-password />
                </el-form-item>

                <!-- <div class="login-options">
                    <el-checkbox v-model="rememberMe" label="记住我" />
                    <a href="#" class="forgot-password">忘记密码?</a>
                </div> -->

                <el-form-item>
                    <el-button type="primary" class="login-btn" @click="handleLogin" :loading="loading"
                        @keyup.enter="handleLogin">
                        {{ loading ? '登录中...' : '登录' }}
                    </el-button>
                </el-form-item>
            </el-form>

            <div class="login-footer">
                <div class="copyright">Copyright © 2025 通用后台管理系统</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import CryptoJS from 'crypto-js';
import { useRouter } from 'vue-router'
import { jwtDecode } from 'jwt-decode'
import { ElMessage } from 'element-plus'
import { useAxiosStore } from '@/store/axios'
import { User, Lock } from '@element-plus/icons-vue'
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { login_login_api } from '@/common/corewebapi/login_api'
import { useApiResponseCodeStore } from '@/store/apiResponseCode'

const loginFormRef = ref();//初始化登录信息
const loading = ref(false);//初始化登录状态
const router = useRouter();//初始化路由器信息
// const rememberMe = ref(false);//初始化记住我
const apiResponseCodeStore = useApiResponseCodeStore().apiResponseCode;//api响应码枚举
//初始化登录表单信息
const loginForm = reactive({
    username: ref(''),
    password: ref('')
});
//登录表单信息验证
const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
    ]
});

// 处理键盘事件
const handleKeyPress = (event) => {
    if (event.key === 'Enter' && !loading.value) {
        handleLogin();
    }
}
// 添加全局键盘事件监听
onMounted(() => {
    document.addEventListener('keypress', handleKeyPress);
})
// 移除事件监听
onUnmounted(() => {
    document.removeEventListener('keypress', handleKeyPress);
})
//登录按钮事件
const handleLogin = () => {
    if (!loginFormRef.value) return;

    loginFormRef.value.validate((valid) => {
        if (valid) {
            loading.value = true;
            //对输入密码进行加密操作
            loginForm.password = md5HashEncrypt(loginForm.password);

            // 登录请求
            login_login_api(loginForm).then((res) => {                
                let { code, msg, body } = res.data;                                
                if (code === apiResponseCodeStore.Success) {
                    //登录成功
                    let userInfo = jwtDecode(body.accessToken);//解析JWT信息获取对应的用户信息
                    //记录token用于前端后续接口使用
                    useAxiosStore().$patch({
                        accessToken: body.accessToken,
                        refreshToken: body.refreshToken,
                        user: userInfo
                    })

                    //跳转首页
                    router.push('/home');
                }
                else                                    
                    ElMessage.error(msg);                                

                loading.value = false;
            }).catch((error) => {
                // 处理错误
                ElMessage.error(error.message);
                loading.value = false;
            });
        }
        else {
            ElMessage.error('请正确填写用户名和密码！');
            return false;
        }
    })
};
//md5Hash加密方法
function md5HashEncrypt(encryptString) {
    // 使用CryptoJS库计算MD5哈希
    const hash = CryptoJS.MD5(
        CryptoJS.enc.Utf8.parse(encryptString)
    );

    // 将哈希结果转换为十六进制字符串并大写
    return hash.toString(CryptoJS.enc.Hex)
        .toUpperCase();
}
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 20px;
}

.login-content {
    width: 100%;
    max-width: 420px;
    background: rgba(30, 41, 59, 0.8);
    border-radius: 16px;
    padding: 40px 35px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.login-header {
    text-align: center;
    margin-bottom: 35px;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #3b82f6;
}

.logo i {
    font-size: 28px;
    margin-right: 12px;
    color: #60a5fa;
}

.welcome-text {
    color: #cbd5e1;
    font-size: 16px;
    margin-top: 10px;
    opacity: 0.8;
}

:deep(.el-input__wrapper) {
    background-color: rgba(15, 23, 42, 0.5);
    box-shadow: 0 0 0 1px rgba(74, 85, 104, 0.5);
    border-radius: 8px;
}

:deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.8);
}

:deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #3b82f6;
}

:deep(.el-input__inner) {
    color: #e2e8f0;
}

:deep(.el-input__inner::placeholder) {
    color: #94a3b8;
}

:deep(.el-input__prefix) {
    color: #94a3b8;
}

:deep(.el-form-item__label) {
    color: #e2e8f0;
}

.login-form {
    margin-bottom: 25px;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

:deep(.el-checkbox__label) {
    color: #cbd5e1;
}

:deep(.el-checkbox__inner) {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(74, 85, 104, 0.5);
}

.forgot-password {
    color: #60a5fa;
    text-decoration: none;
    font-size: 14px;
}

.forgot-password:hover {
    text-decoration: underline;
    color: #3b82f6;
}

.login-btn {
    width: 100%;
    height: 45px;
    font-size: 16px;
    font-weight: 500;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.login-footer {
    text-align: center;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright {
    font-size: 12px;
    color: #64748b;
}

/* 响应式设计 */
@media (max-width: 480px) {
    .login-content {
        padding: 30px 25px;
    }

    .logo {
        font-size: 22px;
    }

    .logo i {
        font-size: 24px;
    }

    .welcome-text {
        font-size: 14px;
    }

    .login-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .forgot-password {
        margin-left: auto;
    }
}
</style>